<template>
  <!-- ===================列表 &文本 ====================-->
  <div class="list-text">
    <!-- 🌸有天气数据时 -->
    <li v-for="(city, index) in citys" :key="index" v-if="citys.length">
      <!-- 列表+按钮组容器 -->
      <div class="list-container">
        <!-- 名称+温度 -->
        <div class="list">
          <div class="city-name">
            <span>{{ city.name }}</span>
          </div>
          <!-- <div class="city-temp">
            <span>{{ city.temp }}℃</span>
          </div> -->
        </div>
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="view" @click="handleView(index)">查看</button>
          <button class="delete" @click="handleDelete(index)">删除</button>
        </div>
      </div>
    </li>
    <!--🌸无天气数据时 -->
    <div class="bottom-tips" v-else>
      暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 引入router 用于跳转
import { useRouter } from 'vue-router';
const router = useRouter();


// 列表数据
const citys = ref([]);

// 转换城市名格式的函数
const formatCityNames = (data) => {
  if (!data) return [];
  if (typeof data === 'string') {
    return [{ name: data, temp: 0 }];
  }
  if (Array.isArray(data)) {
    return data.map((item) => ({ name: item, temp: 0 }));
  }
  return [];
};

onMounted(() => {
  const storedData = JSON.parse(localStorage.getItem('cityNamep'));
  console.log('122', storedData);
  const formattedData = formatCityNames(storedData);
  citys.value = formattedData;
  console.log('citys', citys.value);
});

// 存放搜素城市名 对应adcode
const searchAdcode = ref('');
// 存放 搜索adcode 对应的天气9
const searchWeather0 = ref([]);
const searchWeather9 = ref([]);

// 查看按钮逻辑
const handleView = 
  // 请求数据->城市名 获取 天气
  async (index) => {
    try {
      // 城市名 获取 adcode
      searchAdcode.value = await getcityadcode(citys.value[index].name);
  
      console.log('搜索adcode：', searchAdcode.value);
      // adcode获取 天气
      searchWeather0.value = await getadcodeweather(
        searchAdcode.value.geocodes[0].adcode
      );
      searchWeather9.value = searchWeather0.value.forecasts[0].casts;
      console.log('搜索天气', searchWeather9.value);

      // 调用仓库方法，将搜索天气数组保存到 pinia
      updataWsearch(searchWeather9.value);
    } catch (error) {
      console.log('获取失败：', error);
    }
    router.push(`details/${citys.value[index].name}`);
  };

// 删除按钮逻辑
const handleDelete = (index) => {
  // 删除数组对应索引的元素
  citys.value.splice(index, 1);

  // 同步更新本地存储，将最新的 citys 数组转成 JSON 存入
  localStorage.setItem('cityNamep', JSON.stringify(citys.value));

  console.log('删除后城市列表:', citys.value);
};
</script>

<style lang="scss" scoped>
// ===================列表 &文本 ====================
.list-text {
  margin-top: 26px;
  // 🌸有天气数据时
  li {
    margin-bottom: 16px;
    cursor: pointer;
    // 列表文本+按钮组容器
    .list-container {
      position: relative; /* 为按钮组定位提供参考 */
      // 文本宽度缩小
      &:hover .list {
        width: 80%;
      }
      // 显示按钮
      &:hover .action-buttons {
        display: flex; /* 显示按钮组 */
      }
      // 名称温度 文本
      .list {
        display: flex;
        align-items: center;
        padding: 13px 40px;
        background-color: #004e71;
        span {
          color: #ffffff;
        }
        .city-name {
          flex: 99%;
        }
        .city-temp {
          flex: 1%;
        }
      }
      // 按钮组
      .action-buttons {
        position: absolute; /* 绝对定位，不占空间 */
        right: 0; /* 右侧对齐 */
        top: 50%; /* 垂直居中 */
        transform: translateY(-50%); /* 调整垂直位置 */
        display: flex;
        gap: 10px;
        display: none; /* 隐藏按钮组 */
        // 单个按钮
        button {
          height: 42px;
          width: 80px;
          font-size: 17px;
          color: white;
          background-color: #eab308;
          border: none;
        }
      }
    }
  }
  // 🌸无天气数据时
  .bottom-tips {
    color: #ffffff;
    text-align: center;
    font-size: 17px;
  }
}
</style>
